<template>
  <div
    class="navbarBox"
    title="Title"
    :style="{ backgroundColor: backgroundColor }"
  >
    <!-- left-->
    <div class="navbar_left" @click="onClickLeft">
      <svg class="zuojiantou1_icon" aria-hidden="true">
        <use xlink:href="#icon-zuojiantou1"></use>
      </svg>
    </div>
    <!-- center-->
    <div class="navbar_center" :style="{ color: titerColor }">
      <span>{{ title }}</span>
    </div>
    <!--right-->
    <slot></slot>
  </div>
</template>

<script>
import { useRouter } from "vue-router";
import { useStore } from "vuex";

export default {
  name: "NavBar",
  props: {
    title: {
      type: String,
    },
    titerColor: {
      type: String,
      default: "#5f7bb7",
    },
    backgroundColor: {
      type: String,
      default: "#f0f0f0",
    },
    routerLink: {
      style: String,
      default: "/",
    },
  },
  setup(props) {
    const store = useStore();
    const router = useRouter();
    const onClickLeft = () => {
      //返回上一级路由 ()
      //to--->petTable
      if (props.routerLink == "/petTable") {
        router.back();
      } else {
        if (props.routerLink != "/authorTable") {
          //跳转页面时城市地址刷新---除了petTable页面
          store.commit("area/handleCity", "全部");
          //跳转页面时爱宠人士性别刷新---除了authorTable页面
          store.commit("authorFiltrate/handleGender", "全部");
        }
        //跳转页面时宠物种类刷新---除了petTable页面
        store.commit("petFiltrate/handleKind", "全部");
        store.commit("petFiltrate/handleCategoryId", 0);
        router.push(props.routerLink);
      }
      //to--->authorTable
      if (props.routerLink == "/authorTable") {
        router.back();
      }
      // else {
      //   //跳转页面时爱宠人士性别刷新---除了authorTable页面
      //   store.commit("authorFiltrate/handleGender", "全部");
      //   router.push(props.routerLink);
      // }
      // router.back();
      //关闭筛选框的弹出框
      if (store.state.popup.isPopup) {
        store.commit("popup/handleIspoup");
      }
      //关闭城市选择弹出框
      if (store.state.area.isArea) {
        store.commit("area/handleIsArea");
      }
      // store.commit("area/handleCity", "全部");
    };
    return {
      onClickLeft,
    };
  },
};
</script>

<style scoped lang="less">
.navbarBox {
  // position: fixed;
  // top: 0;
  // left: 0;
  width: 100%;
  //height: 2.5rem;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
  //background-color: #dcdee0;
  .navbar_center {
    //color: #5f7bb7;
    font-weight: bold;
    font-size: 1.1rem;
    letter-spacing: 0.5rem;
  }
}
.navbar_left,
.navbar_center {
  display: flex;
  align-items: center;
}
.zuojiantou1_icon {
  width: 2rem;
  height: 2rem;
  fill: currentColor;
  overflow: hidden;
}
</style>
